import { Card } from "@/assets/className";
import HeartIcon from "@/components/partern/Heart";
interface CardProps {
  value: number;
  suit: string;
  isArbitrary?: boolean; 
}

const CardBody = function (props: CardProps){
  const card = new Card(props.value, props.suit, props.isArbitrary);
  const style = {
    cardHead:{
      width: '100%',
      height: '32px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'baseline',
    },
    card: {
      width: '100px',
      height: '125px',
      border: '1px solid grey',
      backgroundColor: '#cecece',
    },
    cardSuit: {
      position:'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      fontSize: '24px',
      color: 'red'
    }
  }
  console.log(card)
  return <>
      <div className="card" style={style.card}>
        <div className="card-head" style={style.cardHead}>
          <div className="card-value">{card.label}</div>
          <div className="card-suit">{card.suit==='heart' ? HeartIcon({color: 'red', size: 12}): ""}</div>
        </div>
        <div className="card-body">
          <div className="card-suit">{Array(card.value).map((_val, index) => card.suit === 'heart' ? HeartIcon({color: 'red', size: 24}): "")}</div>
        </div>
        <div className="card-head below">
          <div className="card-value">{card.label}</div>
          <div className="card-suit">{card.suit==='heart'? HeartIcon({color:'red', size: 12}): ""}</div>
        </div>
    </div>
  </>
}
export default CardBody;